<!-- 初始的进入页面 -->
<template>
  <div class="context_box">
    <van-swipe class="my-swipe_img" :autoplay="8000" indicator-color="white" v-if="banner[0]">
      <van-swipe-item v-for="(item,i) in banner" :key="i" class="my-swipe_img">
        <div class="my-swipe_img img cenFlex" @click="goLink(item.link)">
          <img :src="item.picture" alt />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="btn_bottom">
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          v-for="(item,i) in diamond"
          :key="i"
          :icon="item.icon"
          :text="item.name"
          @click="navLinkGo(item)"
        />
      </van-grid>
    </div>
    <div class="logo img">
      <img src="@/assets/img/index_icon2.png" alt />
    </div>
  </div>
</template>

<script>
import api from "@/api/index.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imagesArr: [
        require("@/assets/img/index_icon19.png"),
        require("@/assets/img/index_icon19.png"),
      ],
      banner: [],
      diamond: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始获取首页的基本信息
    indexListFn() {
      api.indexList().then((res) => {
        if (res.code == 0) {
          let { banner, diamond } = res.page;
          this.banner = banner;
          this.diamond = diamond;
        }
      });
    },
    // 点击前往外链
    goLink(url) {
      window.open(url, "_self");
    },
    // 点击跳转到不同的页面
    navLinkGo(item) {
      if (item.picture) {
        this.$router.push(`img-page?name=${item.name}`);
        localStorage.setItem('pageImgUrl',item.picture)
      } else {
        if (~item.link.indexOf("http") || ~item.link.indexOf("www")) {
          window.open(item.link, "_self");
        } else {
          this.$router.push(item.link);
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.indexListFn();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.my-swipe_img {
  width: 100%;
  max-height: 342px;
}
.btn_bottom {
  padding-top: 20px;
}
.context_box {
  ::v-deep .van-swipe__indicator--active {
    width: 15px !important;
    border-radius: 2px;
    z-index: 99;
  }
  ::v-deep .van-swipe__indicator {
    transition: 0.2s linear;
  }
}
.logo {
  margin: 20px auto;
  margin-top: 60px;
}
</style>